<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="author" content="lcx">
        <title>动态换肤</title>
        <style>
        html,body{
            width: 100%;
            height: 100%;
        }
        .outer{
            height: 40px;
            width: 600px;
            text-align: center;
        }
        .nav{
            display: block;
            margin-left: 300px;
        }
        button{
            width: 20px;
            height: 20px;
            float: left;
            display: block;  
            margin-right: 10px;
            border: none;
            text-align: center;
        }
        button a{
            display: inline-block;
            width: 5px;
            height: 5px;
            background-color: white;
            margin-left: 2px;
            display: none;
        }
        button:nth-of-type(1){
            background-color: green;
        }
        button:nth-of-type(2){
            background-color: red;
        }
        button:nth-of-type(3){
            background-color: black;
        }
        .inner{
            width: 800px;
            height: 100px;
            margin: 40 auto;
        }
        .inner input{
            float: left;
            width: 60px;
            height: 30px;
            color: white;
            border: none;
            border-right: 1px solid white;
        }
     </style>
    </head>
    <body>
     <div class="nav">
       <div class="outer">
            <button data-color="#a3c6a8"><a href="#" style="display: block"></a></button>
            <button data-color="#FFDDDC"><a href=""></a></button>
            <button data-color="#CCC"><a href="#"></a></button>
       </div>
       <div class="inner">
            <input type="button" value="新闻"></input>
            <input type="button" value="娱乐"></input>
            <input type="button" value="体育"></input>
            <input type="button" value="电影"></input>
            <input type="button" value="音乐"></input>
            <input type="button" value="旅游"></input>
        </div>  
     </div>
    </body>
</html>
 <script>
   var btns = document.querySelectorAll('button');
   var inputs = document.querySelectorAll('.inner input');
   console.log(inputs)
   var as = document.querySelectorAll('a');
   var arr = ['green','red','black']
  for(var i = 0; i <btns.length; i ++){
        btns[i].index = i;
        btns[i].onmouseover = function(){
          for(var i = 0;i < btns.length;i ++){
               as[this.index].style.display = 'block';
               var mtns = event.target;
                // 获取自定义属性 data-color 的值
                var color = mtns.dataset.color;
                console.log('获取到的值是：'+color);
                document.body.style.backgroundColor = color;
           } 
           for(var i = 0;i < inputs.length;i ++){
               inputs[i].style.backgroundColor= arr[this.index];
           }
        }
       btns[i].onmouseout = function(){
              as[this.index].style.display = 'none';  
        }
    }




</script>